<template>
  <div >
  <!-- <div class="body">
    <div class="cash-earnings-content">
      <div class="part-1">
        <router-link :to="{name:'use_rules'}">
          <div class="use-gz">使用规则</div>
        </router-link>
        <div class="deposit-out">
          <i class="icon"></i>
          <span class="num">可提现金额 ￥10000</span>
        </div>
      </div>
      <div class="part-round">
        <p class="text1">可用现金收益</p>
        <p class="price">￥48000</p>
      </div>
      <div class="part-3">
        <div class="tip">提现到微信钱包</div>
        <p class="tixian">提现金额</p>
        <div class="money-info">
          <label for="">￥</label>
          <input type="text" class="input-text">
        </div>
        <div class="tips1"><i class="icon"></i>温馨提示：提现金额需≥100元，预计2小时内到账</div>
        <a href="#" class="ljtx-btn">立即提现</a>
      </div>
    </div>
    <div class="backTo" onclick="javascript:history.back(-1);">返回</div>
  </div> -->
   <div class="body">
       <div class="header">
          <div class="">{{sy_data[0].name}}</div>
          <router-link :to="{name:'use_rules'}" style="color:#fff;" class="use-gz">
            {{sy_data[0].guize}}
          </router-link>
          <div class="amount">{{userBalance |amountMin100(2)}}</div>             
          <div class="mx" v-if="shouyi_data.length>0">
             <div class="mxyrz" @click="mxyrz(0)" :class="{mxACTIVE:mxyrzType==0}">
                 已入账
             </div>
             <div class="mxwrz" @click="mxyrz(1)" :class="{mxACTIVE:mxyrzType==1}">
                 未入账
             </div>
          </div>
          <div class="mx" v-else>
             {{sy_data[0].zanwu}}
          </div>
       </div>      
       <div class="main_new" v-if="shouyi_data.length>0&&mxyrzType==0">
            <ul class="list"><!--jsonwayszm:{"1":'直',"2":'间',"3":'平',"4":'平',"-4":'提',"31":'返'},-->
              <li v-for="(item,ind) in shouyi_data" :key="ind">
                <div class="list_left" v-if="item.orderType==-1 || item.orderType==31" @click="href_mx(item.orderId)">
                   <h1 v-if="item.orderType==-1||item.orderType==31">{{jsonway[item.orderType]}}</h1>
                   <h1 v-else>{{jsonway[item.profitType]}}</h1>
                   <h1>余额:<span class="min_new">{{item.userBalance | amountMin100(2)}}</span></h1>
                </div>
                <div class="list_left" v-else>
                   <h1 v-if="item.orderType==-1">{{jsonway[item.orderType]}}</h1>
                   <h1 v-else>{{jsonway[item.profitType]}}</h1>
                   <h1>余额:<span class="min_new">{{item.userBalance | amountMin100(2)}}</span></h1>
                </div>
                <div class="list_right">
                  <h1><span v-if="item.orderType==-1">-</span><span v-else>+</span>{{item.userProfit |amountMin100(2)}}</h1>
                  <h1>{{item.ctime |formatDateTIME()}}</h1>
                </div>
              </li>
              <li class="lhd" @click="herf">
                {{sy_data[0].gengduo}}
              </li>
            </ul>              
       </div>
       <div class="main_new" v-if="shouyi_data.length>0&&mxyrzType==1">
            <ul class="list">
              <li v-for="(item,ind) in shouyi_data" :key="ind">
                <div class="list_left list_leftH" v-if="item.orderType==-1 || item.orderType==31" @click="href_mx(item.orderId)">
                   <h1><span class="TiTlelef">{{jsonwayszm[item.profitType]}}</span>{{jsonway[item.profitType]}}</h1>
                </div>
                <div class="list_left list_leftH" v-else>
                   <h1 v-if="item.orderType==-1">{{jsonway[item.orderType]}}</h1>
                   <h1 v-else><span class="TiTlelef">{{jsonwayszm[item.profitType]}}</span>{{jsonway[item.profitType]}}</h1>
                </div>
                <div class="list_right">
                  <h1>{{item.userProfit |amountMin100(2)}}</h1>
                  <h1>{{item.ctime |formatDateTIME()}}</h1>
                </div>
              </li>
              <li class="lhd" @click="herf">
                {{sy_data[0].gengduo}}
              </li>
            </ul>              
       </div>
       <div class="main_new">
             <div v-if="userBalance>0" @click="cashcardHref" class="btn">
                  {{sy_data[0].tixian}}
            </div>
            <div v-else>

            </div>
       </div>
   </div>
   <PhoneVerification ref="PhoneVerification" @getMessage="getVal"></PhoneVerification>
   <navFooter :pageName="pageName"></navFooter>
</div>
</template>
<script>
import navFooter from '@/components/footer'
import PhoneVerification from '@/components/PhoneVerification'
export default {
  data () {
    return {
      pageName:"personalmine",
      sy_data:[
        {name:'收益余额(元)',mingxi:'收益明细',gengduo:'查看更多',tixian:'立即提现',guize:'使用规则',zanwu:'暂无明细',jiaoyi:'提现状态'}
        ] ,
      shouyi_data:{},
      banlanceType:0,
      userBalance:"",
      jsonway:{"1":'直推收益',"2":"间推收益","3":'平台奖励',"4":'平台奖励',"-1":'现金提现',"31":'提现失败返款'},
      jsonwayszm:{"1":'直',"2":'间',"3":'平',"4":'平'},
      CashList:[],
      PhoneVerificationStyle:'',//这是子组件传来的值
      mxyrzType:0,
      isAccountEntry:1
    }
  },
  mounted(){
      this.list();
      this.cashList();
  },
  methods:{/////api/wap/accounts/moneyProfit  //现金
      mxyrz:function(type){//已入住 0   未入账1
          this.mxyrzType=type
          if(1==type){//未入账
              console.log("调试1")
              this.isAccountEntry=0
          }else{
              console.log("调试0")
              this.isAccountEntry=1
          }
          this.list()
      },
      cashcardHref:function(){
            this.$refs.PhoneVerification.childMethod();
            console.log(this.PhoneVerificationStyle+"1112222333")
            if("成功"==this.PhoneVerificationStyle){
               this.$router.push({ name: 'cashcard',query:{banlancetype:this.banlanceType}})
            }else{
            }
      },
       href_mx:function(id){
         this.$router.push({ name: 'withdrawalstate',query:{rewardId:id}})
       },
       herf:function(){//更多
           this.$router.push({ name: 'cash_earnings_more',query:{balancetype:0,isAccountEntry:this.isAccountEntry}})
       },
       list(){//明细数据
        this.$http.get(this.APIURL_PREFIX+'/api/wap/accounts/moneyProfit?page=1&rows=4',{params:{isAccountEntry:this.isAccountEntry}}).then((response) => {
           this.shouyi_data=response.data.data
           this.wallet();
				}).catch(function(err){
					console.log(err)
				});
       },
       wallet(){//钱包
        this.$http.get(this.APIURL_PREFIX+"/api/wallet").then((response) => {
          this.userBalance=response.data.data.userBalance
          console.log(this.userBalance)
				}).catch(function(err){
					console.log(err)
				});
       },
       cashList(){//卡包
         this.$http.get(this.APIURL_PREFIX+"/api/wap/bankCardBag").then((response) => {
          this.CashList=response.data.data
          }).catch(function (err) {
            console.log(err)
          });
      },
        getVal(msg){//msg就是传过来的数据了  这只是个形参  名字可以随意
         this.PhoneVerificationStyle=msg;//然后将数据赋值给
     }
  },
 components: {
    navFooter,
    PhoneVerification
  },
}
</script>
<style scoped>
  /* @import "../../../assets/personal/css/cash_earnings.css"; */
  .TiTlelef{
    background: #feba01;
    color: #ffffff;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 50%;
    margin-right: 10px;
  }
  .list_leftH{
    padding-top: 8px;
  }
  .mx:after{
    display:block;
    clear:both;content:"";
    visibility:hidden;
    clear: both;
} 
  .mxACTIVE{
    background: #feba01;
    color: #ffffff!important;
  }
  .mxyrz{
    color: #feba01;
    float: left;
    height: 37px;
    line-height: 37px;
    margin-top: 8px;
    padding: 0 20px;
    width: 30%;
    box-sizing: border-box;
    margin-left: 20%;
    border:1px solid #feba01;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  .mxwrz{
    color: #feba01;
    float: left;
    height: 37px;
    line-height: 37px;
    margin-top: 8px;
    padding: 0 20px;
    width: 30%;
    box-sizing: border-box;
    border:1px solid #feba01;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .cilx{
    clear: both;
  }
  .body{
    width: 100%;
    height: 100%;
    font-size:16px;
  }
  .header{
    position: relative;
    height: 8rem;
    background:#ff0808;
    color: #ffffff;
    text-align: left;
    padding: 20px 5%;
  }
  
  .amount{
    line-height: 54px;
    font-size: 36px;
  }
  
  .use-gz{ position: absolute; top: 20px; right: 5%;}
.mx{
  left: 5%;right: 5%;
  position: absolute; bottom: 0;
  margin: 0 auto;
  background-color: #ffffff;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #ff0808;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom:1px solid #e5e5e5; 
}
@media screen and (max-width: 320px){
  .mx{ height: 36px; line-height: 36px;}
}
.main_new{
  width: 90%;
  margin: 0 auto;
}
.list li{
  height: 65px;
  border-bottom: 0.5px solid #e5e5e5;
  background: #ffffff;
  padding: 5px;
}
.list_left,.list_right{
  width: 45%;
}
.list_left{
  float: left;
}
.list_left h1,.list_right h1{
  font-size: 15px;
  text-align: left;
  padding: 8px;
}
.list_right{
  float: right;
}
.list_right h1:nth-of-type(2){
  font-size: 12px;
  text-align: right;
}
.list_right h1:nth-of-type(1){
  text-align: right;
}
.lhd{
  height: 40px !important;
  line-height: 25px;
}
.btn{
 
  height: 50px;
  background: #ff0808;
  display: block;
  margin-top: 15px;
  border-radius: 8px;
  line-height: 50px;
  color: #ffffff
}
.min_new{
  font-size: 14px;
}
</style>
